<template>
  <a-layout id="components-layout-demo-top-side-2">
    <a-layout-header class="header">
      <div class="logo" >
      <router-link to="/welcome" style="color: white; font-size: 18px">
        12306
      </router-link>
      </div>
      <div style="float: right; color: white;">
        您好：{{member.mobile}} &nbsp;&nbsp;
        <router-link to="/login">
          退出登录
        </router-link>
      </div>
      <a-menu
          v-model:selectedKeys="selectKeys"
          theme="dark"
          mode="horizontal"
          :style="{ lineHeight: '64px' }"
      >
        <a-menu-item key="/welcome">
          <router-link to="/welcome">
            <coffee-outlinked/> &nbsp; 欢迎
          </router-link>
        </a-menu-item>
        <a-menu-item key="/passenger">
          <router-link to="/passenger">
            <coffee-outlinked/> &nbsp; 乘车人管理
          </router-link>
        </a-menu-item>
        <a-menu-item key="/ticket">
          <router-link to="/ticket">
            <coffee-outlinked/> &nbsp; 余票查询
          </router-link>
        </a-menu-item>
        <a-menu-item key="/my-ticket">
          <router-link to="/my-ticket">
            <coffee-outlinked/> &nbsp; 我的车票
          </router-link>
        </a-menu-item>
      </a-menu>
    </a-layout-header>
  </a-layout>
</template>
<script>
import {defineComponent, ref, watch} from 'vue';
import store from "@/store";
import router from "@/router";
export default defineComponent({
  name: "the-header-view",
  setup() {
    let member = store.state.member;
    const selectKeys = ref([]);

    watch(() => router.currentRoute.value.path, (newValue) => {
      console.log('watch',newValue);
      selectKeys.value=[];
      selectKeys.value.push(newValue);
    },{immediate: true});

    return{
      member,
      selectKeys
    }
  },
});
</script>
<style>
.logo {
  float: left;
  height: 31px;
  width: 150px;
  color: white;
  font-size: 20px;
}
</style>